/*
 * 资源列表页
 * @Author: ice
 * @Date: 2019-01-10 13:43:50
 * @Last Modified by: ice
 * @Last Modified time: 2020-06-04 14:59:21
 */

<template>
    <div class="container resource-list-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="left"
                    label-width="84px"
                    size="small"
                >
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }"
                    >
                        <el-form-item label="资源状态：">
                            <el-select
                                v-model="filterData.status"
                                filterable
                                @change="getTableData()"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="(item, index) in statusList"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.status"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }"
                    >
                        <el-form-item label="资源类型：">
                            <el-select
                                v-model="filterData.type_no"
                                @change="getTableData()"
                                placeholder="请选择"
                            >
                                <el-option
                                    label="全部"
                                    value=""
                                />
                                <el-option
                                    v-for="item in resourceTypesList"
                                    :key="item.type_no"
                                    :label="item.type_name"
                                    :value="item.type_no"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col
                        class="filter-item"
                        :md="{ span: 6 }"
                        :sm="{ span: 12 }"
                    >
                        <el-form-item
                            label="粉丝数:"
                            label-width="60px">
                            <el-input
                                v-model.trim="filterData.cover_min"
                                type="number"
                                size="small"
                                @keyup.native.enter="getTableData()"
                            /> -
                            <el-input
                                v-model.trim="filterData.cover_max"
                                type="number"
                                size="small"
                                @keyup.native.enter="getTableData()"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        style="margin-top: 10px;"
                        :md="{ span: 24 }"
                        :sm="{ span: 24 }"
                    >
                        <el-form-item label="关键字：">
                            <el-input
                                v-model.trim="filterData.keyword"
                                placeholder="请输入手机号或资源名称或学校名称"
                                type="text"
                                size="small"
                                style="width: 250px;"
                                @keyup.native.enter="getTableData()"
                            />
                            <el-button
                                size="small"
                                type="primary"
                                @click="getTableData()"
                            >搜索</el-button>
                        </el-form-item>

                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    ref="multipleTable"
                    @select="fnSelect"
                    @select-all="fnSelectAllTop"
                    @selection-change="handleSelectionChange"
                    height="100%"
                    style="width: 100%;">
                    <!-- <el-table-column
                        fixed="left"
                        align="center"
                        prop="resource_no"
                        :width="150"
                        label="ID"
                    /> -->
                    <el-table-column
                        type="selection"
                        width="40" />
                    <el-table-column
                        :formatter="emptyFormatter"
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="90"
                        prop="resource_space_no"
                        label="广告位编号"/>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="phone"
                        show-overflow-tooltip
                        :width="110"
                        label="用户手机号">
                        <template slot-scope="scope">
                            <a
                                href="javascript:;"
                                @click="handleRoute('supplyList', {phone: scope.row.phone})"
                                style="color: #409EFF;">{{ scope.row.phone }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="type_name"
                        :min-width="100"
                        show-overflow-tooltip
                        label="资源类别"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="resource_title"
                        show-overflow-tooltip
                        :min-width="124"
                        label="资源名称"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="user-select: text;"
                                :class="!scope.row.resource_link ? 'normal' : ''"
                                @click="fnOpenLink(scope.row.resource_link)"
                            >{{ scope.row.resource_title | emptyFilter }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="filterSchool"
                        prop="resource_school_list"
                        show-overflow-tooltip
                        :min-width="124"
                        label="学校">
                        <template slot-scope="scope">
                            {{ filterSchool(scope.row.resource_school_list) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="resource_people"
                        show-overflow-tooltip
                        label="覆盖人数"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="resource_image_list"
                        show-overflow-tooltip
                        label="上传图片"
                    >
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                @click="fnShowPreview(scope.row.resource_image_list)"
                                :disabled="!scope.row.resource_image_list || scope.row.resource_image_list.length <= 0"
                            >查看{{ (scope.row.resource_image_list && scope.row.resource_image_list.length > 0) ? '('+scope.row.resource_image_list.length+')' : '' }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="resource_remark"
                        show-overflow-tooltip
                        :min-width="150"
                        label="备注"
                    />
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="resource_num"
                        show-overflow-tooltip
                        label="资源数量"
                    />
                    <el-table-column
                        prop="resource_price"
                        :min-width="550"
                        show-overflow-tooltip
                        label="价格(元)">
                        <template slot-scope="scope">
                            <p v-html="priceFormatter(scope.row, scope.column, scope.row.resource_price)"/>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="resource_status"
                        show-overflow-tooltip
                        label="状态"
                    >
                        <template slot-scope="scope">
                            <template v-if="scope.row.resource_status == 1 && scope.row.resource_show==1">已通过</template>
                            <template v-else-if="scope.row.resource_status == 1 && scope.row.resource_show!=1">已关闭</template>
                            <template v-else-if="scope.row.resource_status == 0">待审核</template>
                            <template v-else-if="scope.row.resource_status == -1">未通过</template>
                            <template v-else>--</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        :width="150"
                        label="资源创建时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="modify_time"
                        :width="150"
                        label="提交审核时间">
                        <template slot-scope="scope">
                            {{ scope.row.modify_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="resource_contact"
                        show-overflow-tooltip
                        :width="110"
                        label="联系人"/>
                    <el-table-column
                        prop="modify_time"
                        width="80px"
                        label="动态">
                        <template slot-scope="scope">
                            <el-popover
                                placement="right"
                                width="400"
                                popper-class="log-popper"
                                title="日志"
                                trigger="click">
                                <ul class="log-list">
                                    <li v-if="msgLogList.length == 0">暂无数据</li>
                                    <li
                                        class="log-list-li"
                                        v-for="(item, index) in msgLogList"
                                        :key="index">
                                        <span style="display: inline-block;word-break: break-all;max-width: 250px;">{{ item.resource_change }}</span>
                                        <span style="float: right;">{{ item.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</span>
                                    </li>
                                </ul>
                                <el-button
                                    type="text"
                                    slot="reference"
                                    @click="fnShowMsgLogList(scope.row.resource_no)">查看动态</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="modify_time"
                        width="110px"
                        label="查看修改记录">
                        <template slot-scope="scope">
                            <el-popover
                                placement="right"
                                width="400"
                                popper-class="log-popper"
                                title="日志"
                                trigger="click">
                                <ul class="log-list">
                                    <li v-if="logList.length == 0">暂无数据</li>
                                    <li
                                        style="overflow: hidden; text-align: left;"
                                        v-for="(item, index) in logList"
                                        :key="index">{{ item.log_content }}
                                    </li>
                                </ul>
                                <el-button
                                    type="text"
                                    slot="reference"
                                    @click="fnShowLogList(scope.row.resource_no)">查看修改记录</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="180"
                    >
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnResourceEdit(scope.row.resource_no)"
                                >编辑</el-button>
                                <el-button
                                    type="text"
                                    :disabled="scope.row.resource_status == 1"
                                    @click="fnChangeStatus(scope.row.resource_no, 'pass', '')"
                                >通过</el-button>
                                <!-- :disabled="scope.row.resource_status !== 0" -->

                                <el-button
                                    type="text"
                                    @click="fnDisPass(scope.row.resource_no)"
                                >不通过</el-button>
                            </div>
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnAddContectMethod(scope.row.resource_no)"
                                >新增联系人</el-button>

                                <el-button
                                    type="text"
                                    @click="fnAddMsg(scope.row.resource_no)"
                                >新增动态</el-button>
                            </div>
                            <div>
                                <el-button
                                    v-if="authResult.auth_pay"
                                    type="text"
                                    @click="fnSettleAccount(scope.row)"
                                >结算</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-checkbox
                    v-model="checkedAll"
                    :indeterminate="checkIndeterminate"
                    @change="fnChangeChecked">全选</el-checkbox>
                <el-button
                    size="mini"
                    :disabled="multipleSelection.length == 0 ? true : false"
                    @click="fnMassOperate(1)">委派给销售</el-button>
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
        <img-preview ref="preview" />
        <!-- 新增动态弹窗 -->
        <el-dialog
            title="新增动态"
            width="470px"
            :visible.sync="dialogFormMsgFlag">
            <el-form
                :model="form"
                :rules="rules"
                ref="ruleFormMsg">
                <el-form-item
                    label="内容"
                    prop="resource_change"
                    label-width="50px">
                    <el-input
                        v-model="form.resource_change"
                        placeholder="请给资源添加动态"
                        rows="5"
                        type="textarea"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnResetForm('ruleFormMsg')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitMsgForm('ruleFormMsg')"
                >确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="结算"
            width="470px"
            :visible.sync="dialogSettleAccount"
            :close-on-click-modal="false"
            :before-close="beforeClose"
            @close="fnSettleAccountSubmit(false)">
            <el-form
                :model="settleAccountForm"
                :rules="settleAccountRules"
                ref="ruleFormSettleAccount">
                <el-form-item
                    label="广告位"
                    prop="price_no"
                    label-width="80px">
                    <el-select
                        v-model="settleAccountForm.price_no"
                        size="small"
                        style="width:350px;"
                        placeholder="请选择"
                        @change="fnChangeSettleAccountType(1)">
                        <el-option
                            v-for="item in settleAccountData.resource_price_list"
                            :key="item.no"
                            :label="item.name ? item.name : '单一广告位'"
                            :value="item.no"/>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="合同"
                    label-width="80px">
                    <el-cascader
                        style="width:350px;"
                        expand-trigger="hover"
                        filterable
                        clearable
                        size="small"
                        :options="contractList"
                        v-if="!inputContractFlag"
                        v-model="settleAccountForm.contract_no"/>
                    <el-input
                        v-model="settleAccountForm.contract_no_input"
                        size="small"
                        v-if="inputContractFlag"
                        placeholder="请输入合同编号"/>
                    <el-button
                        type="text"
                        @click="inputContractFlag = !inputContractFlag"
                        size="small">
                        <span v-if="!inputContractFlag">手动输入合同编号</span>
                        <span v-else>选择合同编号</span>
                    </el-button>
                </el-form-item>
                <el-form-item
                    prop="pay_money"
                    label="结算金额"
                    label-width="80px">
                    <template v-if="settleAccountPayType == 1">
                        <div class="pay-price">{{ settleAccountForm.price_no | payFilter(settleAccountData) }}</div>
                    </template>
                    <template v-else-if="settleAccountPayType == 2">
                        <el-input
                            v-model="settleAccountPayMoney"
                            type="number"
                            size="small"
                            style="width:200px;"
                        />
                    </template>
                    <el-button
                        v-if="settleAccountPayType == 1"
                        type="text"
                        @click="fnChangeSettleAccountType(2)">自定义金额</el-button>
                    <el-button
                        v-else
                        type="text"
                        @click="fnChangeSettleAccountType(1)">取消</el-button>
                </el-form-item>

            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    @click="fnSettleAccountSubmit(false)"
                    size="small">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSettleAccountSubmit(true)"
                    :loading="settleAccounting"
                    size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    components: { imgPreview },
    data() {
        let checkPayMoney = (rule, value, callback) => {
            if(this.settleAccountPayType == 2 && !this.settleAccountPayMoney){
                return callback(new Error('请输入自定义金额'));
            }
            return callback();
        };

        return {
            authResult: {},
            statusList: [{
                status: '',
                name: '全部',
            }, {
                status: 1,
                name: '待审核',
            }, {
                status: -1,
                name: '未通过',
            }, {
                status: 2,
                name: '已通过',
            }],
            resourceTypesList: [],
            tableData: [],
            filterData: {
                status: '',
                keyword: '',
                type_no: '',
                cover_max: '',
                cover_min: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            dialogLinkVisible: false,
            currTime: 0,
            logList: [],
            msgLogList: [],
            multipleSelection: [],
            checkIndeterminate: false,
            checkedAll: false,
            form: {
                resource_change: ''
            },
            rules: {
                resource_change: [
                    { required: true, message: '请输入动态内容', trigger: 'blur' }
                ]
            },
            formLabelWidth: '120px',
            dialogFormMsgFlag: false,
            resourceNo: '',
            dialogSettleAccount: false, //结算确认弹窗
            settleAccounting: false,
            settleAccountData: '',// 结算确认数据
            settleAccountPayType: 1,//结算金额类型:1广告位金额, 2 自定义,
            settleAccountPayMoney: '',// 自定义金额
            settleAccountForm: {
                price_no: '',
                contract_no: '',
                contract_no_input: ''
            },// 结算确认数据
            settleAccountRules: {
                price_no: [{ required: true, message: '请选择广告位', trigger: 'blur' }],
                contract_no: [{ required: true, message: '请选择合同或者手动输入合同编号', trigger: 'blur' }],
                pay_money: [{ validator: checkPayMoney, trigger: 'blur' }]
            }, //结算确认数据验证规则
            contractList: [],
            inputContractFlag: false
        };
    },
    computed: {
        checkAllStatus: {
            get() {
                if(this.multipleSelection.length == 0) {
                    return false;
                }else if(this.multipleSelection.length == this.tableData.length) {
                    return true;
                }
            },
            set() {
                return true;
            }
        }
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '资源列表'
            }
        ]);
        this.filterData.status = this.$route.query.status ? eval(this.$route.query.status) : '';
        this.filterData.keyword = this.$route.query.keyword ? this.$route.query.keyword : '';
        this.filterData.type_no = this.$route.query.type_no ? this.$route.query.type_no : '';
        this.fnGetResourceTypeSimpleList();
        this.getTableData(this.$route.query.page);
        this.fnGetContractList();
    },
    filters: {
        emptyFilter(val){
            if (!val) {
                return '--';
            }
            return val;
        },
        payFilter(val, settleAccountData){
            if(!val){
                return '--';
            }else if(!settleAccountData){
                return '--';
            }else{
                for(let i in settleAccountData.resource_price_list){
                    if(settleAccountData.resource_price_list[i].no == val){
                        return settleAccountData.resource_price_list[i].price_pay;
                    }
                }
                return '--';
            }
        }
    },
    methods: {
        getPay(val, settleAccountData){
            if(!val){
                return '';
            }else if(!settleAccountData){
                return '';
            }else{
                for(let i in settleAccountData.resource_price_list){
                    if(settleAccountData.resource_price_list[i].no == val){
                        return settleAccountData.resource_price_list[i].price_pay;
                    }
                }
                return '';
            }
        },
        fnSubmitMsgForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/wei4/resource%5Cadd_change', {
                        resource_no: this.resourceNo,
                        resource_change: this.form.resource_change
                    }, resp => {
                        if (resp.code == 1) {

                            this.fnResetForm('ruleFormMsg');
                            this.$message({
                                type: 'success',
                                center: true,
                                message: '操作成功'
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnResetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogFormMsgFlag = false;
            this.getTableData();
        },
        //新增动态
        fnAddMsg(no) {
            this.resourceNo = no;
            this.dialogFormMsgFlag = true;
        },
        fnAddContectMethod(no) {
            this.$prompt('', '请输入联系方式', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputPlaceholder: '请填写联系人方式',
                inputErrorMessage: '请输入正确的联系方式'
            }).then(({ value }) => {
                this.$post('/wei4/resource%5Cmodify', {
                    resource_no: no,
                    resource_contact: value
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            center: true,
                            message: '操作成功'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },
        fnMassOperate(status) {
            let list = [];

            for(let i = 0; i < this.multipleSelection.length; i++) {
                list.push(this.multipleSelection[i].resource_no);
            }
            if(status == 0) {
                this.$prompt('', '不通过理由', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /\S/,
                    inputErrorMessage: '请输入不通过理由'
                }).then(({ value }) => {
                    this.fnChangeStatus(list.toString(), 'fail', value);
                }).catch(() => {
                });
            }else{
                this.fnChangeStatus(list.toString(), 'pass', '');
            }
        },
        fnSelect(selection) {
            if(selection.length == this.tableData.length) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }

            // 改变全选checkbox 的显示状态
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnSelectAllTop(selection) {
            if(selection.length > 0) {
                this.checkedAll = true;
            }else{
                this.checkedAll = false;
            }

            // 改变全选checkbox 的显示状态
            if(selection.length > 0 && selection.length < this.tableData.length) {
                this.checkIndeterminate = true;
            }else{
                this.checkIndeterminate = false;
            }
        },
        fnChangeChecked() {
            if(this.checkedAll){
                this.toggleSelection(1);
            }else{
                this.toggleSelection();
            }
        },
        toggleSelection(rows) {
            if (rows) {
                this.$refs.multipleTable.toggleAllSelection();
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        filterSchool(val) {
            let temp = '';

            for(let i = 0; i < val.length; i++) {
                if(temp){
                    temp += ',';
                }
                temp += val[i].name;
            }
            return temp;
        },
        fnResourceEdit(no) {
            this.handleRoute('resourceEdit', {resource_no: no});
        },
        fnDisPass(no) {
            this.$prompt('', '不通过理由', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputErrorMessage: '请输入不通过理由'
            }).then(({ value }) => {
                this.fnChangeStatus(no, 'fail', value);
            }).catch(() => {
            });
        },
        fnChangeStatus(no, status, reason) {
            this.$post('/wei4/resource%5Caudit', {
                resource_no: no,
                action: status,
                reason: reason
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.checkedAll = false;
                    this.checkIndeterminate = false;
                    this.$message({
                        type: 'success',
                        center: true,
                        message: '操作成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnShowLogList(resource_no) {
            this.$post('/wei4/resource%5Cget_log_list', {
                resource_no: resource_no
            }, resp => {
                if (resp.code == 1) {
                    this.logList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnShowMsgLogList(resource_no) {
            this.msgLogList = [];
            this.$post('/wei4/resource%5Cget_change_list', {
                resource_no: resource_no
            }, resp => {
                if (resp.code == 1) {
                    this.msgLogList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        fnGetResourceTypeSimpleList() {
            this.$post('/wei4/resource_type%5Cget_simple_list', {}, resp => {
                if (resp.code == 1) {
                    this.resourceTypesList = resp.data.list;
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }

            });
        },
        fnShowPreview(images) {
            let imgs = [];

            for (var i in images) {
                imgs.push(images[i].url);
            }
            this.$refs.preview.show(imgs);
        },
        fnOpenLink(link){
            let linkTmp = link;

            if(!link) {
                return;
            }
            if(link.indexOf('http://') == -1 && link.indexOf('https://') == -1){
                linkTmp = ('//'+linkTmp);
            }
            window.open(linkTmp);
        },
        /**
       * 获取表格数据
       */
        getTableData(page) {
            let time = new Date().getTime();

            this.currTime = time;

            this.$router.replace({
                query: {
                    ...this.filterData,
                    page: page || this.page.now_page
                }
            });
            this.$post('/wei4/resource%5Cget_list', {
                ...this.filterData,
                page: page || this.page.now_page,
                page_size: 20,
            }, resp => {
                if(this.currTime != time){
                    return ;
                }
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                    if (this.page.now_page > resp.data.page.total_page && this.page.now_page !== 1) {
                        this.getTableData(resp.data.page.total_page);
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
       * 跳转页面
       */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
       * 列表渲染辅助函数：列表项为空处理
       */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },
        priceFormatter(row, column, val) {
            let priceList = row.resource_price_list;
            let priceStr = '成本价：';
            let price = '对外价：';
            let service = '服务费：';

            for (var i in priceList) {
                if(row.resource_type.type_price_status == 1){
                    priceStr += (priceList[i].name + ': ' + priceList[i].price + ' | ' + (priceList[i].status == 1 ? '开启; ' : '关闭; '));
                    price += (priceList[i].name + ': ' + priceList[i].price_hire + ' | ' + (priceList[i].status == 1 ? '开启; ' : '关闭; '));
                    service += (priceList[i].name + ': ' + (priceList[i].service_rate ? priceList[i].service_rate + '%' : '￥' + priceList[i].service_money) + '; ');
                }else{
                    priceStr += priceList[i].price;
                    price += priceList[i].price_hire;
                    service += priceList[i].service_rate ? priceList[i].service_rate + '%' : '￥' + priceList[i].service_money;
                }
            }
            return priceStr + '<br>' + price + '<br>' + service;
        },
        /** 结算 */
        fnSettleAccount(resource){
            this.settleAccountData = resource;
            this.settleAccountForm.price_no = resource.resource_price_list ? resource.resource_price_list[0].no : '';
            this.settleAccountForm.contract_no = [];
            this.settleAccountPayMoney = this.getPay(this.settleAccountForm.price_no, this.settleAccountData);
            this.dialogSettleAccount = true;
        },
        beforeClose(done){
            if(this.settleAccounting){
                return ;
            }
            done();
        },
        /** 结算确认 */
        fnSettleAccountSubmit(submit){
            if(this.settleAccounting){
                return ;
            }
            if(submit){
                this.$refs.ruleFormSettleAccount.validate(valid => {
                    if(valid){
                        this.settleAccounting = true;
                        let no = '';

                        if(!this.inputContractFlag) {
                            no = this.settleAccountForm.contract_no[1];
                        }else{
                            no = this.settleAccountForm.contract_no_input;
                        }
                        this.$post('/wei4/resource%5Cpay', {
                            resource_no: this.settleAccountData.resource_no,
                            price_no: this.settleAccountForm.price_no,
                            contract_no: no,
                            pay_money: this.settleAccountPayType == 2 ? this.settleAccountPayMoney : '',
                            action: 'pay'
                        }, resp => {
                            this.settleAccounting = false;
                            if(resp.code == 1){
                                this.$message({
                                    type: 'success',
                                    center: true,
                                    message: '操作成功'
                                });
                                this.dialogSettleAccount = false;
                            }else{
                                this.$message({
                                    type: 'warning',
                                    center: true,
                                    message: resp.msg
                                });
                            }
                        });
                    }
                });
            }else{
                this.dialogSettleAccount = false;
                this.settleAccountPayType = 1;
                this.settleAccountPayMoney = '';
                this.$refs.ruleFormSettleAccount.resetFields();
            }
        },

        fnGetContractList(){
            this.$post('/wei4/hire_contract%5Cget_simple_group_list', {
                type: 1
            }, resp => {

                let list = resp.data.list;
                let distList = [];

                for(let i in list){
                    let tmpList = [];

                    for(let j in list[i].items){
                        let tmp = {
                            label: list[i].items[j].contract_no+'('+list[i].items[j].money+'元)',
                            value: list[i].items[j].contract_no
                        };

                        tmpList.push(tmp);
                    }
                    distList.push({
                        label: list[i].group_name,
                        value: list[i].group_name,
                        children: tmpList
                    });
                }

                this.contractList = distList;
            });
        },

        fnChangeSettleAccountType(type){
            this.settleAccountPayType = type;
            this.settleAccountPayMoney = this.getPay(this.settleAccountForm.price_no, this.settleAccountData);
        }
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;
    .normal{
        color: #606266;
    }
    .el-button {
      padding: 0;
    }
    .icon-bianji {
      font-size: 14px;
      color: #b9b9b9;
      cursor: pointer;
    }
    .btn-delete {
      color: #fd4d32;
      &.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
    .submit-config-item {
      display: inline-block;
      position: relative;
      padding-right: 10px;
      font-size: 14px;

      & + .submit-config-item {
        padding-left: 10px;
        &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          width: 1px;
          height: 14px;
          transform: translate(0, -50%);
          background-color: #d8d8d8;
        }
      }

      .num {
        vertical-align: middle;
      }
      .iconfont {
        font-size: 16px;
        color: #b9b9b9;
        vertical-align: middle;
      }

      .icon-tupian {
        font-size: 20px;
      }
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
  .dialog-link {
    & + .dialog-link {
      margin-top: 20px;
    }
    .link-label {
      font-weight: 500;
      margin-right: 20px;
    }
    .link-value {
    }
  }
  .pay-price{
      display: inline-block;
      margin-right: 5px;
  }
</style>
<style lang="less">
  .resource-list-container {
        //   .cell {
        //       display: flex;
        //       align-items: center;
        //   }
    .el-table td, .el-table th{
        padding: 4px 0!important;
    }
  }
  .task-list-preview-popover {
    min-width: auto !important;
    width: 120px !important;
    height: 120px;
    padding: 8px !important;
  }
  .sort-dialog {
    width: 270px !important;
  }
  .check-all-btn{
      margin-right: 10px;
      cursor: pointer;
      span{
          font-size: 12px;
      }
  }
  .log-popper{
      .log-list-li{
          overflow: hidden;
          text-align: left;
          border-bottom: 1px dashed #ccc;
          margin-bottom: 4px;
          padding-bottom: 4px
      }
  }
</style>
